<script setup lang="ts">
import {ref} from "vue";
import {useCounterStore} from "@/stores/SaveUser";
import {submit, Title} from "@/http/Personal center";

const onClickLeft = () => history.back();
const currentPage = ref(1);
const checked = ref('1');
const titleID = useCounterStore()
console.log(titleID.userInfo)
// 学生id
const Students = titleID.userInfo.id
// console.log(Students)
// 测评id
const list=titleID.title
// console.log(list)
const Render = ref({})
const numberA = ref(0)
const numberB = ref(0)
let numberInit
const number = ref(0)
const Percentage = ref(1)
const assessment=ref([

])
console.log(assessment.value)
Title(titleID.title).then(res => {
    // console.log(res)
    Render.value = res.data
    // console.log(Render.value[0].id)
    // console.log(Render.value)
    numberInit = Number(100 / Render.value.length)
    assessment.value.push(Render.value.id)
})

const submite = ref({
    studentId: Students,
    assessmentId: list,
    ids:[]
})

// 进度
function change(e) {
    console.log(e)
    // 上一题
    if (Percentage.value > e) {
        number.value = 100 / Render.value.length * (currentPage.value - 1)
    } else {//下一题
        number.value = 100 / Render.value.length * (currentPage.value - 1)
        numberB.value += numberA.value
        console.log(numberB.value)
        optionObj.value[Render.value[currentPage.value - 1].id]=checked.value.id
        console.log(optionObj.value)
    }
    Object.keys(optionObj.value).map(item=>{
        submite.value.ids.push({
            id:item,
            optionId:optionObj.value[item]
        })
    })
    console.log(submite.value.ids)
}
const optionObj=ref({})

// 获取分数
function Score() {
    numberA.value = +checked.value.score
}

// 提交
function Submit() {
    numberB.value += numberA.value
    console.log(numberB.value)
    submit(submite.value).then(res=>{
        titleID.Score=res.data
        console.log(titleID.Score)
    })
}
</script>

<template>
    <div>
        <van-nav-bar id="wasf"
                     left-text="抑郁测试"
                     left-arrow
                     @click-left="onClickLeft"
        />
        <!--    进度条-->
        <div class="Progress">
            <span>{{ currentPage }}/{{ Render.length }}</span>
            <div class="Progressbar">
                <progress :max="(Render.length-1)*(100/Render.length)" :value="number" class="Progressone"></progress>
            </div>
        </div>
        <!--    题目内容-->
        <div class="problem">
            <div class="probe">
                {{ Render[currentPage - 1]?.title }}
            </div>
            <van-radio-group v-model="checked">
                <van-radio id="xuan" v-for="item in Render[currentPage-1]?.option" :key="item.id" :name=item
                           @click="Score">
                    <span>{{ item.optname }}</span><span>{{ item.content }}</span>
                </van-radio>
            </van-radio-group>
        </div>
        <!--    上一题下一题-->
        <div class="Buttonwq">
            <van-pagination v-model="currentPage" :page-count="Render.length" mode="simple" @change="change"
                            prev-text="上一题" next-text="下一题"/>
        </div>
        <div class="big">
            <van-button type="primary" size="normal" id="bige" @click="Submit" to="/cepingjieguo">提交</van-button>
        </div>
    </div>
</template>

<style scoped lang="less">
#wasf {
  background-color: #f4f4f4;
}

.Progress {
  width: 90%;
  margin: 0 auto;
  height: 50px;
  line-height: 50px;
  padding: 0 10px;
  background-color: white;
  display: flex;
  justify-content: space-around;

  .Progressbar {
    width: 85%;

    .Progressone {
      width: 100%;
    }
  }

  :deep(.van-progress) {
    margin-top: 14px;
  }
}

.problem {
  width: 90%;
  height: 450px;
  margin: 10px auto;
  padding: 10px;
  background-color: white;

  .option {
    margin-top: 20px;
    height: 40px;
    line-height: 20px;
    padding: 10px 20px;
    display: flex;
    border: 1px solid darkgray;

    span {
      margin-right: 10px;
    }
  }

  .optionad {
    margin-top: 20px;
    height: 40px;
    line-height: 20px;
    padding: 10px 20px;
    display: flex;
    background-color: #ccecfc;
    border: 1px solid darkgray;

    span {
      margin-right: 10px;
    }
  }

  #xuan {
    width: 80%;
    height: 60px;
  }
}

.Buttonwq {
  display: flex;
  justify-content: space-around;
  margin-top: 20px;

  :deep(.van-pagination__item button) {
    width: 100px;
  }
}

.big {
  text-align: center;
  margin-top: 20px;

  #bige {
    width: 65%;
  }
}
</style>